<template>
	<view class="Inspector-conatiner">
		<!-- 搜索框 -->
		<searchBar v-model="searchValue" @search="search" placeholder="搜索巡检员名称或手机号" :needShadow="false" />

		<!-- 巡检员列表 -->
		<view class="inspector-box">
			<z-paging ref="paging" :fixed="false" v-model="inspectorList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>

				<template #empty></template>

				<div @click="chooseInspector(item)" v-for="item in inspectorList" :key="item.id" :class="{ 'InspectorList-item': true, 'active-item': item == currentChooseInspector }">
					<span class="label">{{ item.userName }}</span>
					<span class="value">{{ item.tel }}</span>
				</div>
			</z-paging>
		</view>
	</view>

	<!-- 底部提交按钮 -->
	<div class="footer">
		<div @click="submit" class="button">确认</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { getInspectorList } from '@/api/deviceAllocation.js';
import searchBar from '@/subPages/components/cds-searchBar/index.vue';
import { onLoad } from '@dcloudio/uni-app';

// 搜索框内容
const searchValue = ref('');
const search = (e) => {
	searchValue.value = e;
	paging.value.reload();
};

// 获取巡检员列表
const getInspectorListFun = async (pageNum = 1, pageSize = 10) => {
	let res = await getInspectorList({
		pageNum,
		pageSize,
		param: searchValue.value,
	});
	if (res.code == 200) {
		paging.value.complete(res.rows);
	}
};

// 查询巡检员列表
const inspectorList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	getInspectorListFun(pageNo, pageSize);
	// paging.value.complete([1, 2, 3, 4]);
};

// 选择巡检员
const currentChooseInspector = ref(null);
const chooseInspector = (item) => {
	console.log(item);
	currentChooseInspector.value = item;
};

// 确认选择
const submit = () => {
	if (!currentChooseInspector.value?.id) {
		uni.showToast({
			title: '请选择巡检员',
			icon: 'none',
		});
		return;
	}
	
	uni.$emit('chooseInspector', currentChooseInspector.value)
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.Inspector-conatiner {
	height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;

	.inspector-box {
		height: calc(100vh - 88rpx - 48rpx - 24rpx - 196rpx);
		margin-top: 24rpx;

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.InspectorList-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16px 12px;
			border-radius: 12px;
			background-color: #fff;
			margin-bottom: 12px;
			border: 1px solid #fff;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				font-family: PingFang SC;
				font-size: 16px;
				font-weight: 500;
				line-height: 22.4px;
				color: #333;
			}

			.value {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: 400;
				line-height: 19.6px;
				color: #333;
			}
		}

		.active-item {
			border: 1px solid #00c582;
		}
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;
	width: 100vw;
	height: 190rpx;
	padding-top: 24rpx;
	background-color: #fff;

	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		width: 646rpx;
		height: 98rpx;
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 44rpx;
		border-radius: 96rpx;
		background-color: #00c582;
	}
}
</style>
